<template>
	<tm-fullView>
		<view>
			<tm-menubars title="日历" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-24 ">嵌入式弹层日历({{ceshit}})</view>
				<tm-calendar :defaultValue.sync="ceshit" >
					<tm-button theme="bg-gradient-blue-accent">打开日历</tm-button>
				</tm-calendar>
				<tm-calendar :defaultValue.sync="ceshit"   :show-nongli="true">
					<tm-button  >打开农历日历</tm-button>
				</tm-calendar>
			</tm-sheet>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-24 ">时间限定,指定日期样式,及范围模式</view>
				<tm-calendar :txt="txt" :selected-date-class="dateClass" color="bg-gradient-orange-accent-b" :defaultValue.sync="ceshitaa" time-start="2021-8-10" time-end="2021-8-31">
					<tm-button theme="bg-gradient-orange-accent-b">时间限定八月份</tm-button>
				</tm-calendar>
				
				<tm-calendar  :default-value.sync="ceshit" color="bg-gradient-red-lighten-b" mode="rang" :bing-start.sync="bts" :bing-end.sync="ets">
					<tm-button  theme="bg-gradient-red-lighten-b" >范围选择</tm-button>
				</tm-calendar>
			</tm-sheet>
			<tm-sheet :shadow="24">
				<view class="text-size-s text-weight-b mb-24 ">月份日历及暗黑模式</view>
				<tm-monthCalendar >
					<tm-button>月份日历</tm-button>
				</tm-monthCalendar>
				<tm-calendar black >
					<tm-button  >暗黑模式</tm-button>
				</tm-calendar>
			</tm-sheet>
			<tm-sheet :shadow="24" :padding="[0,0]">
				<view class="text-size-s text-weight-b pa-32 ">嵌入式日历</view>
				<tm-calendarView :default-value.sync="ceshit" :bing-start.sync="bts" :bing-end.sync="ets" color="bg-gradient-red-lighten-b"></tm-calendarView>
			</tm-sheet>
			
		</view>
	</tm-fullView>
	
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmCalendarView from "@/tm-vuetify/components/tm-calendarView/tm-calendarView.vue"
	import tmCalendar from "@/tm-vuetify/components/tm-calendar/tm-calendar.vue"
	import tmMonthCalendar from "@/tm-vuetify/components/tm-monthCalendar/tm-monthCalendar.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmCalendarView,tmCalendar,tmMonthCalendar},
		data() {
			return {
				ceshit:'2021-8-1',
				bts:'2021-8-10',
				ets:'2021-8-10',
				ceshitaa:'2021-8-10',
				// 下标文本设定.
				txt:[
					{date:'2021-8-20',text:"哈哈"},
					{date:'2021-8-21',text:"呵呵"},
					{date:'2021-8-22',text:"浪哈"},
					{date:'2021-8-23',text:"满员了"},
				],
				// 指定日期的样式 。
				dateClass:[
					{date:'2021-8-20',class:" red "},
					{date:'2021-8-21',class:" blue   "},
					{date:'2021-8-22',class:" bg-gradient-blue-accent  "},
					{date:'2021-8-23',class:" green  "},
				]
			}
		},
		mounted() {
			
		},
		methods: {
			
		}
	}
</script>

<style>
.text-white-cc{
	color: #FFF !important;
	
}
.text-white-cc span{
		color: #FFF !important;
	}
</style>
